<template>
  <div id="app">
    <!-- 卡片组件 -->
    <el-card class='login-card'>
      <!-- 登录表单 -->
      <!-- 如果要获取el-form的方法 要获取el-form的实例  ref -->
      <el-form ref="loginForm" style="margin-top: 50px" :model="loginForm" :rules="loginRules">
        <el-form-item  prop="mobile">
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-button type="primary" @click="test">async/await</el-button>
    <el-button type="primary" @click="test1">async的意思</el-button>
    <el-button type="primary" @click="getCatch">异常捕获</el-button>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  },
  data () {
    // 自定义校验函数
    const checkMobile = function (rule, value, callback) {
      value.charAt(2) === '9' ? callback() : callback(new Error('第三位手机号必须是9'))
    }
    // 定义表单数据对象
    return {
      loginForm: {
        mobile: '',
        password: ''
      },
      // 表单校验规则搞定
      // { key(字段名): value(校验规则) => [{}]  }
      // 一个对象就是一个规则
      loginRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }, {
            trigger: 'blur',
            validator: checkMobile
          }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {
          min: 6, max: 16, message: '密码应为6-16位的长度', trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    login () {
      // 获取el-form的实例
      this.$refs.loginForm.validate(function (isOK) {
        if (isOK) {
          // 说明校验通过
          // 调用登录接口
        }
      }) // 校验整个表单
    },
    async test () {
      // await总是会等到 后面的promise执行完resolve
      // async /await就是让我们 用同步的方法去写异步
      const result = await new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(5)
        }, 5000)
      })
      alert(result)
    },
    async  test1 () {
      await this.test() // 此时的test是一个异步函数  当同步代码 和异步代码共存时，先把异步进程挂起来，先把同步执行代码完成，再顺序执行原来挂起的异步代码
      alert(1)
    },
    // 捕获异常意味着我们的promise reject了
    async  getCatch () {
      try {
        await new Promise(function (resolve, reject) {
          reject(new Error('fail'))
        })
        alert(123)
      } catch (error) {
        alert(error)
      }
    }
  }
}
</script>

<style>
 #app {
   width: 100%;
   height: 100vh;
   background-color: pink;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .login-card {
   width: 440px;
   height: 300px;
 }
</style>
